<template>
  <div class="main">
    <h2>欢迎使用微卡管理运营系统!</h2>
    <a-form class="login-form" :form="form" @submit="handleSubmit">
      <a-form-item>
        <a-input
          v-decorator="[
            'loginid',
            {rules: [{ required: true, message: '用户名不能为空' }]}
          ]"
          placeholder="请输入用户名"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
            'password',
            {rules: [{ required: true, message: '密码不能为空' }]}
          ]"
          type="password"
          placeholder="请输入密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item class="verification">
        <a-input
          v-decorator="[
            'valid_code',
            {rules: [{ required: true, message: '验证码不能为空' }]}
          ]"
          class="verificate-input"
          placeholder="请输入验证码"
        ></a-input>
        <img class="verificate-code" :src="imgCode" @click="getCode()" />
      </a-form-item>
      <a-form-item>
        <a-checkbox>记住密码</a-checkbox>
        <a-button type="primary" html-type="submit" class="login-form-button" :loading="loading">登录</a-button>
      </a-form-item>
    </a-form>
    <p class="copyright-tip">Copyright© 2019 深圳市中卡管理科技有限公司版权所有</p>
  </div>
</template>

<script>
import { getCode, login } from '../../store/action.js'
export default {
  name: 'Login',
  data() {
    return {
      imgCode: '',
      form: this.$form.createForm(this),
      loading: false
    }
  },
  mounted() {
    this.getCode()
    // 每次到登录页就移除token
    localStorage.removeItem('token')
  },
  methods: {
    getCode() {
      getCode().then(data => {
        this.imgCode = data.data.url
      })
    },
    submit(data) {
      this.loading = true
      login(data)
        .then(res => {
          // 登录成功跳转页面
          let auth = res.data
          localStorage.setItem(
            'token',
            `${auth.token_type} ${auth.access_token}`
          )
          localStorage.setItem('username', `${auth.account}`)
          this.loading = false
          if (this.$route.query.redirect) {
            this.$router.push(this.$route.query.redirect)
          } else {
            this.$router.push('/menu/provider/list')
          }
        })
        .catch(res => {
          this.loading = false
          this.form.setFieldsValue({ valid_code: '' })
          this.getCode()
        })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.main {
  height: 100vh;
  overflow: auto;
  background: #f0f2f5;
  h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    padding-top: 150px;
  }
  .login-form {
    max-width: 300px;
    margin: auto;
    margin-top: 60px;
    .verification {
      .verificate-input {
        float: left;
        width: 60%;
      }
      .verificate-code {
        width: 35%;
        height: 36px;
        float: right;
        border-radius: 4px;
      }
    }
    input {
      height: 38px;
    }
  }
  .login-form-button {
    width: 100%;
    height: 36px;
    margin-top: 15px;
  }
  .copyright-tip {
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -174px;
    z-index: 9;
  }
}
</style>
